<template>
    <div>


        <el-container class="layout-container-demo">


            <el-aside :width="asideWidth" style="background-color: #545c64;">
                <div style="height: 60px;text-align: center;line-height: 60px;background-color: white;">
                    <span v-if="isMenuCollapse == false"
                        style="font-size: large;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">OpporAdmin</span>

                    <div v-if="isMenuCollapse == false" style="display: inline-block;float: right;">
                        <el-button size="default" @click="toggleAside">
                            <el-icon>
                                <Menu />
                            </el-icon>
                        </el-button>
                    </div>

                    <el-button v-if="isMenuCollapse == true" size="default" @click="toggleAside">
                        <el-icon>
                            <Menu />
                        </el-icon>
                    </el-button>
                </div>

                <div>

                    <el-scrollbar max-height="580px">




                        <el-menu @select="handleMenuSelect" :collapse="isMenuCollapse" :default-active="actMenuIndex"
                            :default-openeds="['2']" background-color="#545c64" text-color="#fff"
                            active-text-color="#ffd04b">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <location />
                                    </el-icon>
                                    <span>Navigator One</span>
                                </template>
                                <el-menu-item-group>
                                    <template #title><span>Group One</span></template>
                                    <el-menu-item index="1-1">item one</el-menu-item>
                                    <el-menu-item index="1-2">item two</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="Group Two">
                                    <el-menu-item index="1-3">item three</el-menu-item>
                                </el-menu-item-group>
                                <el-sub-menu index="1-4">
                                    <template #title><span>item four</span></template>
                                    <el-menu-item index="1-4-1">item one</el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>

                            <el-menu-item index="2">
                                <el-icon>
                                    <Operation />
                                </el-icon>
                                <template #title>Navigator Two</template>
                            </el-menu-item>
                            <!-- <el-menu-item index="3" disabled> -->
                            <el-menu-item index="3">
                                <el-icon>
                                    <document />
                                </el-icon>
                                <template #title>Navigator Three</template>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <template #title>Navigator Four</template>
                            </el-menu-item>

                            <el-sub-menu index="5">
                                <template #title>
                                    <el-icon>
                                        <location />
                                    </el-icon>
                                    <span>Navigator Five</span>
                                </template>
                                <el-menu-item-group>
                                    <template #title><span>Group One</span></template>
                                    <el-menu-item index="5-1">item one</el-menu-item>
                                    <el-menu-item index="5-2">item two</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="Group Two">
                                    <el-menu-item index="5-3">item three</el-menu-item>
                                </el-menu-item-group>
                                <el-sub-menu index="5-4">
                                    <template #title><span>item four</span></template>
                                    <el-menu-item index="5-4-1">item one</el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>

                            <el-menu-item index="6">
                                <el-icon>
                                    <setting />
                                </el-icon>
                                <template #title>Navigator Six</template>
                            </el-menu-item>
                        </el-menu>
                    </el-scrollbar>
                </div>

            </el-aside>


            <el-container>

                <el-header style="text-align: right; font-size: 12px">
                    <div class="toolbar">

                        <span>{{ weatherInfo.city }}天气：{{ weatherInfo.wea + weatherInfo.tem2 + '~' + weatherInfo.tem1 }}度，{{ weatherInfo.win + weatherInfo.win_speed }}
                        </span>
                        <TimeOut style="display: inline-block"></TimeOut>
                        <span style="margin-right: 10px">{{ weatherInfo.week }}</span>

                        <div style="margin-right: 15px;">
                            <el-button size="default">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </div>
                        <div style="margin-right: 15px;">
                            <el-button size="default">
                                <el-icon>
                                    <Notification />
                                </el-icon>
                            </el-button>
                        </div>
                        <div style="margin-right: 15px;">
                            <el-button size="default">
                                <el-icon>
                                    <HelpFilled />
                                </el-icon>
                            </el-button>
                        </div>
                        <div style="margin-right: 15px;">
                            <el-button size="default" @click="screenfullBtn">
                                <el-icon>
                                    <FullScreen />
                                </el-icon>
                            </el-button>
                        </div>

                        <div>
                            <el-dropdown>
                                <!-- <el-icon style="margin-right: 8px; margin-top: 1px">
                                <setting />
                            </el-icon> -->

                                <el-button type="primary">
                                    Tom <el-icon class="el-icon--right"><arrow-down /></el-icon>
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>
                                            <el-button type="primary" link disabled>Add</el-button>

                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <el-button type="primary" link disabled>Delete</el-button>


                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <el-button type="primary" link @click="personalBtn">个人中心</el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item divided>
                                            <el-button type="danger" link @click="logout">注销</el-button>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <!-- <span>Tom</span> -->
                        </div>

                    </div>
                </el-header>

                <el-main>
                    <div>

                        <el-scrollbar max-height="580px">


                            <RouterView />


                        </el-scrollbar>
                    </div>

                </el-main>

            </el-container>




        </el-container>

        <!-- <el-container style="height: 60px;position: fixed;margin-bottom: 0px;">
                <el-footer>
                    sdwdqd
                </el-footer>

            </el-container> -->
        <!-- </el-scrollbar> -->

        <!-- <div style="bottom: 0px;position: fixed;width: 100%;height: 36px;">
            <p style="text-align: center;color: black;">
                CopyRight by lzh @2024
            </p>
        </div> -->
    </div>
</template>
  
  <!-- <script lang="ts" setup>
  import { ref } from 'vue'
  import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  
  const item = {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
  const tableData = ref(Array.from({ length: 20 }).fill(item))
  </script> -->

<script>
import { RouterView } from 'vue-router';
import moment from 'moment';
import screenfull from 'screenfull';
import { ElMessage, ElMessageBox } from 'element-plus'
import TimeOut from "@/components/TimeOut.vue";
import originJSONP from "jsonp";

export default {
    components: {
        TimeOut
    },
    data() {
        return {
            asideWidth: '200px',
            isMenuCollapse: false,
            actMenuIndex: "2",
            item: {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            tableData: [],
            weatherInfo: {}

        }
    },
    created() {
        console.log(this.$route);
        let routeNameTarget = this.$route.name;
        console.log(routeNameTarget)
        let routeQueryTarget = this.$route.query;
        console.log(routeQueryTarget)

        let metaIndex = this.$route.meta.index;
        console.log(metaIndex)
        if (metaIndex !== '') {
            this.actMenuIndex = metaIndex;
        }
    },
    mounted() {
        this.getWeather();

    },


    methods: {
        getWeather() {
            let url3 = 'https://www.tianqiapi.com/api?version=v6&appid=85618448&appsecret=9ZfOvBsd&callback=ckp';
            let opts = {
                prefix: 'ckp'
            }
            //发起jsonP请求
            originJSONP(url3, opts, (err, data) => {
                console.log('????????????????===')
                if (!err) {
                    console.log(data);
                    this.weatherInfo = data;
                } else {
                    console.log(err)
                }
            });
        },

        logout() {
            this.$router.push({
                path: '/',
                query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

            })
        },
        personalBtn() {
            this.$router.push({
                path: '/layout/personal',
                query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }
            })
        },

        screenfullBtn() {

            if (!screenfull.isEnabled) {

                ElMessage.warning('浏览器不支持全屏!');
                return false;
            }
            screenfull.toggle();
            console.log(screenfull.isFullscreen)
            if (screenfull.isFullscreen) {
                ElMessage.success('页面已退出全屏!');
            } else {
                ElMessage.success('页面已全屏显示!');
            }
        },
        toggleAside() {
            if (this.isMenuCollapse == false) {
                this.isMenuCollapse = true;
                this.asideWidth = '64px';
            } else {
                this.isMenuCollapse = false;
                this.asideWidth = '200px';
            }
        },
        handleMenuSelect(index, indexPath, item, routeResult) {

            console.log(index)
            console.log(indexPath)
            console.log(item)
            console.log(routeResult)
            console.log(moment(new Date()).format('YYYYMMDDHHmmss'))
            if (index == 3) {
                this.$router.push({
                    path: '/layout/personal',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }
                })
            }

            if (index == 2) {
                this.$router.push({
                    path: '/layout/home',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                })
            }

            if (index == 4) {
                this.$router.push({
                    path: '/layout/about',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                })
            }
            if (index == 6) {
                this.$router.push({
                    path: '/layout/testRegion',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                })
            }

            if (index == '1-1') {
                this.$router.push({
                    path: '/layout/lifecycle',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                })
            }
            if (index == '1-2') {
                this.$router.push({
                    path: '/layout/test3D',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                })
            }
            if (index == '1-3') {
                this.$router.push({
                    path: '/layout/echarts',
                    query: { ts: moment(new Date()).format('YYYYMMDDHHmmss') }

                })
            }

        }
    }
}
</script>
  
<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

/* .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
} */

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>
  